<template>
  <div>
    <!-- 配置路由： /register -->
    <!-- 标题栏 -->
    <mt-header title="注册">
      <mt-button icon="back" slot="left"></mt-button>
      <router-link to="/login" slot="right" style="text-decoration: none"
        >登录</router-link
      >
    </mt-header>
    <!-- 表单 -->
    <mt-field
      v-model="name"
      type="text"
      label="用户名"
      placeholder="请输入用户名"
      :state="nameState"
      @blur.native.capture="checkName"
    ></mt-field>
    <mt-field
      v-model="pwd"
      type="password"
      label="密码"
      placeholder="请输入密码"
      :state="pwdState"
      @blur.native.capture="checkpwd"
    ></mt-field>
    <mt-field
      v-model="repwd"
      type="password"
      label="确认密码"
      :state="repwdState"
      placeholder="请再次输入密码"
      @blur.native.capture="checkrepwd"
    ></mt-field>
    <!-- 按钮 -->
    <mt-button type="primary" size="large" @click="regist">快速注册</mt-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      pwd: "",
      repwd: "",
      nameState: "",
      pwdState: "",
      repwdState: "",
    };
  },
  methods: {
    checkName() {
      //用户输入焦点失去后执
      //验证账号
      let reg = /^\w{3,15}$/;
      if (reg.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
    checkpwd() {
      //验证密码
      let reg = /^\w{6}$/;
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },
    checkrepwd() {
      //验证密码
      let reg = /^\w{6}$/;
      if (reg.test(this.repwd) && this.pwd == this.repwd) {
        this.repwdState = "success";
        return true;
      } else {
        this.repwdState = "error";
        return false;
      }
    },
    regist() {
      //依次注册 name pwd repwd
      if (this.checkName() && this.checkpwd() && this.checkrepwd()) {
  // 点击注册后执行
  alert('注册成功')
    this.$router.push('/login')
      console.log(`${this.name}, ${this.pwd}, ${this.repwd}`);
      }
    },
  },
};
</script>
